import React from 'react';
import _ from 'lodash';

import classnames from 'classnames';
//component


import './index.less';
import ReIcon from 'single/widgets/ReIcon';

export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
        list: React.PropTypes.array,
        onSelect: React.PropTypes.func,
        activePath: React.PropTypes.array,

    };

    static defaultProps = {
        //name: 'component name'
        list: [],
        activePath: [0]
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            list: props.list,
            activePath: [0]
        };
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            list: nextProps.list,
            activePath: nextProps.activePath,
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }
    renderCursion(data, path) {

        return (
            <ul className="recursion-list">
                {data.map((v,i)=>(
                    <li className="recursion-item">
                        <div onTouchTap={e=>this.props.onSelect(v,[...path,i],e)} className={`recursion-content ${_.isEqual([...path,i], this.state.activePath)?'active':''}`}>
                            {v.icon && <ReIcon className="recursion-icon" icon={v.icon}></ReIcon>}
                            <span  className="recursion-title">{v.title}</span>
                        </div>
                        { (v.children && v.children.length>0) ? this.renderCursion(v.children,[...path,i]) :null}
                    </li>
                ))}
            </ul>
        );

    }

    render() {

        const classNames = classnames({
            'orin-sw-recursionlist-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames} >
                {this.renderCursion(this.state.list,[])}
            </div>
        );
    }
}
